<template>
	<view>
		<view class="sticky-top">
			<view class="search-content">
				<view class="search">
					<image src="@/static/imgs/sou.png" mode=""></image>
					<input class="sm-mn"
						placeholder-style='color:#b2b2b2;font-size:26rpx;height:70rpx;line-height:70rpx' type="text"
						@confirm="onSearch" @input="onInput" confirm-type="搜索" v-model="searchVal"
						placeholder="请输入用户信息或者订单编号">
					<image v-show="searchVal" @tap="clearSearch" class="close" src="@/static/imgs/close.png"
						mode="">
					</image>
				</view>
			</view>
			<view class="integral-tab">
				<view :class="['integral-item',{'act':intindex===index}]" v-for="(item,index) in orderlist" :key="index"
					@click="ordertab(index)">{{item}}</view>
			</view>
		</view>
		<view class="order-list">
			<view class="order-item" v-for="(item,index) in data" :key="index">
				<view class="order-tit">
					<view class="order-time">订单编号：{{item.ordersn}}</view>
					<view class="order-state1" v-if="item.type==10">待付款</view>
					<view class="order-state1" v-if="item.type==20">待发货</view>
					<view class="order-state2" v-if="item.type==30">待收货</view>
					<view class="order-state2" v-if="item.type==40">已完成</view>
				</view>
				<view class="order-li-box" v-for="(items,index) in item.goods_list">
					<view class="order-li-item">
						<image :src="items.thumb" v-if="items.thumb.indexOf('http') != -1"></image>
						<image :src="'/attachment/'+items.thumb" v-else></image>
						<view class="order-li-ri">
							<view class="shop-tit">{{items.g_name}}</view>
							<view class="shop-pri">
								<view>￥{{items.g_jiage}}</view>
								<view>X {{items.num}}</view>
							</view>
						</view>
					</view>
				</view>
				<!-- <view class="order-li-yh">
					<view>优惠{{item.xdtime}}</view>
					<view class="order-yh-pri">-￥5</view>
				</view> -->
				<view class="order-operation">
					<view class="order-num">下单 共1件 <view>￥{{item.count_money}}</view>
					</view>
					<view class="order-opera-btn">
						<view class="order-btn2" v-if="item.type==10" @click="order_edit(item.o_id,'qx')">取消订单</view>
						<view class="order-btn1" v-if="item.type==20" @click="fahuo(item.o_id)">发货</view>
						<view class="order-btn1" v-if="item.type==30" @click="seewuliu(item.o_id)">查看物流</view>
						<!-- <view class="order-btn1" v-if="item.type==30" @click="order_edit(item.o_id,'sh')">确认收货</view> -->
					</view>
				</view>
			</view>
			<u-empty text="暂无订单" mode="order" margin-top="200" v-if="data==''"></u-empty>
		</view>
	</view>
</template>
<script>
	let timer = null;
	export default {
		data() {
			return {
				intindex: 0,
				orderlist: ['日订单', '月订单', '年订单'],
				data: [],
				searchVal: '',
				keywords: ''
			};
		},
		onLoad(option) {
			if (option.status > 0) {
				this.ordertab(parseInt(option.status))
			} else {
				this.ordertab(0)
			}
		},
		//下拉刷新
		onPullDownRefresh() {
			this.ordertab(0)
		},
		//加载更多
		onReachBottom() {
			this.ordertab(0)
		},
		methods: {
			// 键盘搜索
			onSearch() {
				let that = this;
				that.keywords = that.searchVal;
				that.data = [];
				that.ordertab(that.intindex)
			},
			// 输入防抖搜索
			onInput() {
				let that = this; 
				// 输入不及时
				setTimeout(() => {
					that.keywords = that.searchVal;
				}, 0);
				// 防抖
				if (timer !== null) {
					clearTimeout(timer);
				}
				timer = setTimeout(() => {
					that.data = [];	
					that.ordertab(that.intindex)
				}, 1000);
			},
			// 清除搜索框
			clearSearch() {
				this.searchVal = '';
				this.keywords = '';
				this.data = []
				this.ordertab(this.intindex)
			},
			ordertab: function(index) {
				this.intindex = index
				var that = this;
				this.global.request.post({
					data: {
						op: 'shangjia',
						do: 'Orders',
						type: index,
						keywords: that.keywords
					},
					success: res => {
						this.data = res
					}
				})
			},
			order_edit: function(id, op) {
				this.global.request.post({
					data: {
						op: op,
						do: 'orders_edit',
						id: id
					},
					success: res => {}
				})
			},
			pay: function(id) {

				//#ifdef H5
				this.global.request.pay_wx('do=pay&id=' + id)
				//#endif
				//#ifdef MP-WEIXIN
				this.global.request.post({
					id: id,
					do: 'wx_pay',
				}, function(ress) {
					uni.requestPayment({
						'provider': 'wxpay',
						'timeStamp': ress.timeStamp,
						'nonceStr': ress.nonceStr, //字符串随机数
						'package': ress.package,
						'signType': ress.signType,
						'paySign': ress.paySign,
						success: function(res) {
							uni.navigateTo({
								url: '/pagesA/my-order/my-order?status=0'
							})
						}
					})
				})
				//#endif
			},
			fahuo: function(index) {
				uni.navigateTo({
					url: '/pagesA/shangjia/order/send/send?id=' + index
				})
			},
			seewuliu: function(index) {
				uni.navigateTo({
					url: '/pagesA/wuliu-infor/wuliu-infor?id=' + index
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: $uni-bg;
	}

	.sticky-top {
		width: 100%;
		position: fixed;
		top: 0;
	}

	.integral-tab {
		display: flex;
		justify-content: space-around;
		width: 100%;
		height: 88upx;
		background: #fff;
		font-size: 30upx;
		color: #2c2c2c;
		box-shadow: 0 2upx 15upx rgba($color: #000000, $alpha: .05);
		z-index: 991;

		.integral-item {
			width: 115upx;
			height: 88upx;
			line-height: 88upx;
			text-align: center;
		}

		.act {
			color: #FE7D4C;
			border-bottom: 4upx solid #fe7d4c;
		}
	}

	.bar {
		height: 88upx;
	}

	.order-list {

		padding-top: 210rpx;



		.order-item {
			padding: 0 30upx;
			background-color: #fff;
			margin-bottom: 24upx;

			.order-tit {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 25upx 0;
				border-bottom: 1upx solid #F2F2F4;
				font-size: 26upx;
				color: #6a6a6a;

				.order-state1 {
					font-size: 30upx;
					color: #FD7A4D;
				}

				.order-state2 {
					font-size: 30upx;
					color: #999;
				}
			}

			.order-li-box {
				padding-bottom: 24upx;
				border-bottom: 1upx solid #F2F2F4;

				.order-li-item {
					display: flex;
					align-items: center;
					padding-top: 24upx;

					image {
						width: 130upx;
						height: 130upx;
					}

					.order-li-ri {
						width: 540upx;
						margin-left: 25upx;

						.shop-tit {
							font-size: 30upx;
							color: #333;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}

						.shop-pri {
							display: flex;
							justify-content: space-between;
							align-items: center;
							margin-top: 50upx;
							font-size: 28upx;
						}
					}
				}
			}

			.order-li-yh {
				display: flex;
				justify-content: space-between;
				font-size: 26upx;
				padding: 20upx 0;

				.order-yh-pri {
					color: #FD7A4D;
				}
			}

			.order-operation {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20upx 0;

				.order-num {
					display: flex;
					font-size: 28upx;
					color: #6A6A6A;

					view {
						margin-left: 20upx;
						color: #FD7A4D;
					}
				}

				.order-opera-btn {
					display: flex;

					view {
						padding: 4upx 25upx;
						font-size: 28upx;
						color: #fff;
						margin-left: 20upx;
						border-radius: 20upx;
					}

					.order-btn1 {
						background-color: #FD7A4D;
					}

					.order-btn2 {
						background-color: #AAAAAA;
					}
				}
			}
		}
	}

	.buy-trea {
		position: fixed;
		top: 30%;
		left: 20%;
		width: 60%;
		padding: 30rpx;
		background: #fff;
		border-radius: 20rpx;
		z-index: 997;
		// transform: translate3d(0, 120%, 0);
		transition: all .3s cubic-bezier(.25, .5, .5, .9);
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.trea-mask {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background: rgba(0, 0, 0, .5);
		z-index: 994;
	}

	.text {
		text-align: center;
		margin-bottom: 20rpx;
	}

	.buy-trea image {
		margin-bottom: 20rpx;
		width: 300rpx;
		height: 300rpx;
	}

	.tishi {
		color: red;
		font-size: 20rpx;
		text-align: center;
	}

	.search-content {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 30rpx;
		background: #FFFFFF;
	}

	.search {
		width: 100%;
		height: 70rpx;
		// margin-left:20rpx;
		background-color: #F8F8F8;
		border-radius: 40rpx;
		display: flex;
		align-items: center;
	}

	.search input {
		width: 75%;
	}

	.search image {
		width: 40rpx;
		height: 40rpx;
		margin: 0 15rpx;
	}

	.close {
		width: 30rpx;
		height: 30rpx;
	}
</style>
